<div class="header-box">
  <!-- <div class="logo-box ccenter">aily.</div> -->
  <div class="menu ccenter" (click)="openMenu()">
    <div class="btn ccenter" nz-tooltip nzTooltipTitle="菜单">
      <i class="fa-regular fa-bars"></i>
    </div>
  </div>

  @if(isLoaded()){
  <div class="board ccenter" (click)="openPortList()">
    {{currentBoard}}
    @if(currentPort){
    ({{currentPort}})
    }@else{
    (-)
    }
    <div class="down ccenter"><i class="fa-regular fa-angle-down"></i></div>
  </div>
  }
  <div class="null-box drag" (dblclick)="maximize()"></div>
  <div class="project-box ccenter">{{ projectData.name }}</div>
  <div class="toolbox">
    @for (zone of headerBtns; track $index) {
    <div class="zone ccenter">
      @for (btn of zone; track $index) {
      @if(!btn.dev||isDevMode) {
      @if(showInRouter(btn)){
      @if (btn.type === 'act-btn') {
      <app-act-btn [icon]="btn.icon" [color]="btn.color" [(state)]="btn.state" nz-tooltip
        nzTooltipTitle="{{ btn.name | translate}}" (click)="onClick(btn)"></app-act-btn>
      }@else{
      <div class="btn ccenter" nz-tooltip nzTooltipTitle="{{ btn.name | translate}}" (click)="onClick(btn,$event)"
        [ngStyle]="{ color: btn.color ? btn.color : '' }" [ngClass]="{ selected: isOpenTool(btn) }">
        <i class="{{ btn.icon }}"></i>
        @if (btn.more) {
        <div class="more ccenter">{{ btn.more }}</div>
        }
      </div>
      }
      }
      }
      }
    </div>
    }
  </div>
  <div class="win-btns">
    <div class="btn ccenter minimize" (click)="minimize()">
      <i class="fa-regular fa-minus"></i>
    </div>
    <div class="btn ccenter maximize" (click)="maximize()">
      <i class="fa-regular fa-square"></i>
    </div>
    <div class="btn ccenter close" (click)="close()">
      <i class="fa-regular fa-xmark"></i>
    </div>
  </div>
</div>
<!-- menu -->
@if (showMenu) {
<app-menu [menuList]="headerMenu" (closeEvent)="closeMenu()" (itemClickEvent)="onMenuClick($event)"></app-menu>
}
<!-- device port list -->
@if (showPortList) {
<app-menu class="ports" [position]="{x:40,y:40}" [width]="260" [menuList]="configList" (closeEvent)="closePortList()"
  [keywords]="boardKeywords" (itemClickEvent)="selectPort($event)"
  (subItemClickEvent)="selectSubItem($event)"></app-menu>
}
@if(showUser){
<app-user [position]="userPosition" [width]="260" (closeEvent)="closeUser()"></app-user>
}